<template>
  <div>
    <oolongInput size="large" placeholder="large size"></oolongInput>
    <br><br>
    <oolongInput placeholder="default size"></oolongInput>
    <br><br>
    <oolongInput size="small" placeholder="small size"></oolongInput>
    <br><br>
    <oolongInput icon="ios-clock-outline" placeholder="请输入..." style="width: 200px"></oolongInput>
    <br><br>
    <oolongInput type="textarea" placeholder="请输入..."></oolongInput>
    <br><br>
    <oolongInput type="textarea" :rows="4" placeholder="请输入..."></oolongInput>
    <br><br>
    <oolongInput type="textarea" :autosize="true" placeholder="请输入..."></oolongInput>
    <br><br>
    <oolongInput type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder="请输入..."></oolongInput>
    <br><br>
    <oolongInput disabled placeholder="请输入..."></oolongInput>
    <br><br>
    <oolongInput disabled type="textarea" placeholder="请输入..."></oolongInput>
    <br><br>
    <oolongInput :slot-ready="true">
      <span slot="prepend">http://</span>
      <span slot="append">.com</span>
    </oolongInput>
    <br><br>
    <oolongInput :slot-ready="true">
      <oolongSelect :model="select1" slot="prepend" style="width: 80px">
        <oolongOption value="http">http://</oolongOption>
        <oolongOption value="https">https://</oolongOption>
      </oolongSelect>
      <oolongSelect :model="select2" slot="append" style="width: 70px">
        <oolongOption value="com">.com</oolongOption>
        <oolongOption value="org">.org</oolongOption>
        <oolongOption value="io">.io</oolongOption>
      </oolongSelect>
    </oolongInput>
    <br><br>
    <oolongInput :slot-ready="true">
      <oolongSelect :model="select3" slot="prepend" style="width: 80px">
        <oolongOption value="day">日活</oolongOption>
        <oolongOption value="month">月活</oolongOption>
      </oolongSelect>
      <oolongButton slot="append" icon="ios-search"></oolongButton>
    </oolongInput>
  </div>
</template>
<script>
export default {
  methods: {},
  data() {
    return {
      select1: 'http',
      select2: 'com',
      select3: 'day'
    }
  }
}
</script>
<style lang="scss" scoped>

</style>
